<template>
    <div class="main">
        <div class="navigation">
            <div class="HomePagelogo"></div>
            <ul class="user-facility">
                <li @click="handleHome">
                    <div>
                        <img src="@/assets/home.png" alt="">
                    </div>
                    <span>首页</span>
                </li>
                <li>
                    |
                </li>
                <li @click="handleMyLibrary">
                    <div>
                        <img src="@/assets/ideabank.png" alt="">
                    </div>
                    <span>智库</span>
                </li>
                <li>
                    |
                </li> 
                <li @click="handleFileList">
                    <div>
                        <img src="@/assets/norm.png" alt="">
                    </div>
                    <span>标准</span>
                </li>
                <li>
                    |
                </li>  
                <li @click="handleLaboratory">
                    <div>
                        <img src="@/assets/laboratory.png" alt="">
                    </div>
                    <span>实验室</span>
                </li>
                <li>
                    |
                </li>                              
                <li @click="handleBook" >
                    <div>
                        <img src="@/assets/library.png" alt="">
                    </div>
                    <span>图书馆</span>
                </li>
                <li>
                    |
                </li>                               
                <li>
                    <div>
                      <!-- <a-badge count="25" /> -->
                        <img src="@/assets/notice.png" alt="">
                        <span>1</span>
                    </div>
                    <span>通知</span>
                </li>
                <li>
                    |
                </li>
                <li @click="handleIntoBackground" v-has="'main:backstage'">
                    <img src="@/assets/setting.png" alt="">
                    <span>后台</span>
                </li>
                <li  v-has="'main:backstage'">
                    |
                </li>
                <li v-has="'mainData:projectContractMould:index'" @click="handleTemplate" >
                    <img src="@/assets/download.png" alt="">
                    <span>模板</span>
                </li>
                <li  v-has="'mainData:projectContractMould:index'">
                    |
                </li>
                <li @click="handleIntoMyProfile">
                    <img src="@/assets/user.png" alt="">
                    <span>{{userData.username}}</span>
                </li>
            </ul>
        </div>
        <div class="banner" v-if="isShowBanner">
        </div>
        <div class="project-summary">
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
export default {
  name:'NavLayout',
  props: {
    userData:{
        required:false,
         type:Object,
         default:()=>{return JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value } 
    },
    isShowBanner:{
        default:true,
        type:Boolean
    }
  },
  data () {
      return {
        // userinfo:this.$store.getters.userInfo,
        userInfo:{}
      }
  },
  created(){
      
  },
  mounted () {
  },
  methods: {
    handleIntoBackground(){
        // this.$router.push({ path: "/dashboard/analysis" }).catch(()=>{
        //     console.log('登录跳转首页出错,这个错误从哪里来的')
        // })
        window.open(this.HTE_OLD_SERVER_URL+`/index/backstage?bootToken=${ Vue.ls.get(ACCESS_TOKEN)}`, "_blank");
    },
    handleTemplate(){
        window.open(this.HTE_OLD_SERVER_URL+`/projectContractMould/index?bootToken=${ Vue.ls.get(ACCESS_TOKEN)}`, "_blank");
    },
    handleHome(){
        // this.$router.push({ path: "/homepage" }).catch(()=>{
        //     console.log('登录跳转首页出错,这个错误从哪里来的')
        // })
        let urlJump = this.$router.resolve({path: "/homepage" })
        window.open(urlJump.href,"_blank")    
    },
    handleMyLibrary(){
        window.open(this.HTE_OLD_SERVER_URL+`/rad/resource/toMyLibrary?bootToken=${ Vue.ls.get(ACCESS_TOKEN)}`, "_blank");
    },
    handleFileList(){
         window.open(this.HTE_OLD_SERVER_URL+`/fileAbstract/fileList?bootToken=${ Vue.ls.get(ACCESS_TOKEN)}`, "_blank");
    },
    handleLaboratory(){
        window.open(this.HTE_OLD_SERVER_URL+`/laboratory/index?bootToken=${ Vue.ls.get(ACCESS_TOKEN)}`, "_blank");
    },
    handleBook(){
        window.open(this.HTE_OLD_SERVER_URL+`/book/index?bootToken=${ Vue.ls.get(ACCESS_TOKEN)}`, "_blank");
    },
    handleIntoMyProfile() {
        this.$router.push({path:'/myProfile'})
    }
  }
}
</script>
<style lang="less" scoped>
    .main{
        width: 100%;
        // height: 100%;
        font-size: 12px;
        background-color: #f5f5f5;
        ul{
            list-style: none;
        }
        .colorGrey{
          color: #b5b5b5;
        }
        .navigation{
            display: flex;
            justify-content: space-between;
            height: 60px;
            padding:5px 125px;
            background-color: #fff;
            align-items: flex-end;
            .HomePagelogo{
                width: 188px;
                height: 46px;
                background-image: url('../../assets/hx-logo.png');
            }
            .user-facility{
                display: flex;
                justify-content: flex-end;
                width: 80%;
                li{
                    line-height: 0;
                    margin: 0 1%;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    div{
                        position: relative;
                        display: inline-block;
                        span{
                            width: 18px;
                            height: 18px;
                            border-radius: 50%;
                            background-color: red;
                            position: absolute;
                            text-align: center;
                            line-height: 18px;
                            right: 0px;
                            top: -10px;
                            color: white;
                        }
                    }
                    img{
                        margin-right: 10px;
                    }
                    &:nth-child(even){
                        line-height: normal;
                        margin: 0 5px;
                    }
                }
            }
        }
        .banner{
          height: 80px;
          background-image: url('../../assets/banner-top.png');
        }
    }
</style>